<template>
  <div class="home">
    <el-container style="height: 500px; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-message"></i>
              <router-link to="zhu" tag="span">主页</router-link>
            </template>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"
              ><i class="el-icon-menu"></i
              ><router-link to="hao" tag="span"
                >单独的路由</router-link
              ></template
            >
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"
              ><i class="el-icon-setting"></i
              ><router-link to="userlist" tag="span"
                >外链</router-link
              ></template>

          </el-submenu>
          <!--  -->
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>二级菜单</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1"><router-link to="all" tag="span">表格</router-link></el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!--  -->
          <el-submenu index="5">
            <template slot="title"
              ><i class="el-icon-setting"></i
              ><span @click="fn_quit">退出登录</span>
            </template>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 主体 -->
      <router-view></router-view>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    const item = {
      name: "Json",
      age: "15",
      address: "上海市普陀区金沙江路 1518 弄",
    };
    return {
      tableData: Array(20).fill(item),
    };
  },
  methods: {
    fn_quit() {
      console.log("111");
      localStorage.clear();
      this.$router.push({ name: "Login" });
    },
  },
};
</script>
<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>